# Cumulative Layout Shift (CLS)

This script displays the CLS value when the focus of the browser is switched to another tab, since the CLS is calculated during the lifetime of the page.

#### Snippet

```js copy
let cumulativeLayoutShiftScore = 0;
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      cumulativeLayoutShiftScore += entry.value;
    }
  }
});

observer.observe({ type: "layout-shift", buffered: true });

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    observer.takeRecords();
    observer.disconnect();

    console.log(`CLS: ${cumulativeLayoutShiftScore}`);
  }
});
```
